<template>
    <div class="zs-table-page-container">
        <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
            <span>
                <el-select v-model="biProjectCode" class="zs-select-md zs-space-right-sm" placeholder="项目名称"
                    @change="getData">
                    <el-option v-for="item in projectList" :key="item.biProjectCode" :label="item.projectName"
                        :value="item.biProjectCode" />
                </el-select>
                <el-date-picker class="zs-select-md zs-space-right-sm" v-model="yearmonth" type="month" placeholder="月份"
                    value-format="YYYY-MM" :clearable="false" @change="getData" />
                <el-button class="zs-btn-plain" @click="getData"> 查询 </el-button>
            </span>
            <span>
                <el-button class="zs-btn-plain" @click="handleDownload">
                    <el-icon class="el-icon--left">
                        <Upload />
                    </el-icon>导出
                </el-button>
            </span>
        </div>
        <div class="zs-card zs-table-page-content">
            <el-table class="zs-table-page-main-no-footer" :data="tableData" :stripe="stripe">
                <el-table-column label="序号" width="60" :align="'center'">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="ddate" label="日期" :align="'center'" show-overflow-tooltip></el-table-column>
                <el-table-column prop="passengerFlow" label="客流量" :align="'right'" show-overflow-tooltip>
                    <template #default="scope">
                        {{ toThousands(scope.row.passengerFlow) }}
                    </template>
                </el-table-column>
                <el-table-column prop="passengerFlowW2w" label="环比上周" :align="'right'" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.passengerFlowW2w }}%
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="" label="操作" :align="'center'" width="100">
                    <template #default="scope">
                        <el-button class="zs-link" link size="small" @click="goDetail(scope.row)"
                            v-btnPermi="{ permis: ['p_btn_system_project_electronic_gate_list_query'] }">查看</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="zs-text-gray-dark zs-text-sm zs-space-top zs-layout-flex-row zs-layout-justify-between">
                <span>{{ unit }}</span>
            </div>
        </div>

    </div>
</template>
<script setup>
import digitalMonthlyReportApi from '@/api/Manage/Business/digitalMonthlyReport';
import dbPublicApi from '@/api/dbPublic';
import { toThousands } from '@/utils/number-util'
import { ref } from 'vue'
import { downloadNewFile } from '@/utils/publicUtils';
import { useRoute } from 'vue-router';
const route = useRoute().query;

const tabPermi = ref(route.tabPermi)
const biProjectCode = ref(route.biProjectCode)
const yearmonth = ref(route.yearmonth)
const projectList = ref([])
const tableData = ref([])
const unit = ref('*单位：人次')

const getList = async () => {
    await dbPublicApi.queryProjectListsApi(tabPermi.value).then(res => {
        if (res.data.code == 200) {
            projectList.value = res.data.data.projects;
        }
    });
};

const getData = () => {
    digitalMonthlyReportApi.customerTargetDetailApi({ dataTime: yearmonth.value, projectCode: biProjectCode.value }).then(res => {
        if (res.data.code == 200) {
            tableData.value = res.data.data
        }
    });
}


// 导出
const handleDownload = async () => {
    const fileName = `客流.xls`;
    let fileData;
    await digitalMonthlyReportApi.customerTargetDetailExportApi({ dataTime: yearmonth.value, projectCode: biProjectCode.value }).then(res => {
        fileData = res.data;
    });
    downloadNewFile(fileData, fileName);
};

const init = () => {
    getList()
    getData()
}
init()

</script>
  
<style scoped lang="scss">
.cur-width {
    width: 70%;
    max-width: 970px;
}

.cur-table {
    border: 1px solid #ebeef5;
    display: flex;
    margin: 0 20px;
    background-color: #f6f7fa;
}

.cur-table-cell {
    border-right: 1px solid #ebeef5;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    height: 60px;
    justify-content: center;
    padding: 0 18px;

    &:last-child {
        border-right: none;
    }
}

.el-calendar :deep(.el-calendar__body) {
    padding: 0;
}

.el-calendar :deep(.el-calendar__body .el-calendar-day) {
    padding: 0;
    height: 87px;
}

.el-calendar :deep(.el-calendar-table td.is-today) {
    color: #477AFD
}

.calendar-day-box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .day-header {
        height: 28px;
        display: flex;
        justify-content: space-between;
    }
}

.is-select-day {
    background-color: #f5f7fe !important;
}

.is-weekend {
    background-color: #F9F9F9;
}
</style>
  